<template>
  <div class="m-lock">
    <div class="slideBox">
      <div class="pass" :style="'width:'+(moveToLeft+25)+'px'"></div>
      <div class="slide" @touchmove.stop="touchMove" @touchend="touchEnd" @touchstart.prevent="touchStart" :style="'left:'+moveToLeft+'px'">
        <img src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/huakuai.png"></div>
      右滑同意支付调度费>>>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        moveToLeft: 0,//滑动距离
        starX: 0,//初始距离
        slideBoxWidth: 0,
        slideWidth: 0,
        notUnlock: true
      }
    },
    onLoad() {
      this.notUnlock = true
    },
    mounted() {
      var _this = this;
      wx.createSelectorQuery().selectAll('.slideBox').boundingClientRect(function (rects) {
        rects.forEach(function (rect) {
          // rect.id      // 节点的ID
          // rect.dataset // 节点的dataset
          // rect.left    // 节点的左边界坐标
          // rect.right   // 节点的右边界坐标
          // rect.top     // 节点的上边界坐标
          // rect.bottom  // 节点的下边界坐标
          // rect.width   // 节点的宽度
          // rect.height  // 节点的高度
          _this.slideBoxWidth = rect.width
        })
      }).exec()
      wx.createSelectorQuery().selectAll('.slide').boundingClientRect(function (rects) {
        rects.forEach(function (rect) {
          _this.slideWidth = rect.width
        })
      }).exec()
    },
    methods: {
      unlockSuccess() {
        this.notUnlock = false
        this.$emit('unlockSuccess')
      },
      touchStart(e) {
        let starX = e.touches[0].pageX;
        this.starX = starX

      },
      touchMove(e) {
        let ToLeft = e.touches[0].pageX - this.starX;//变化后的坐标减去初始坐标
        let slideBoxW = Math.floor(this.slideBoxWidth - this.slideWidth - 1);//计算大盒子宽度
        if (ToLeft < 0) ToLeft = 0;//滑块不能超出大盒子左边
        if (ToLeft > slideBoxW) ToLeft = slideBoxW;//滑块不能超出大盒子右边
        this.moveToLeft = ToLeft
        if (ToLeft == slideBoxW) { //滑动到底部
          if (this.notUnlock) {
            this.unlockSuccess()
          }
          this.moveToLeft = 0
//          wx.showToast({
//            title: '同意',
//            icon: 'success',
//            duration: 2000
//          })
//          setTimeout(() => {
//            this.moveToLeft = 0
//          },2000)
        }
      },
      touchEnd() {
        if (!this.isUnlock) {
          this.moveToLeft = 0
        }
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .m-lock
    width 100%
    .slideBox
      height: 100px;
      line-height: 100px
      background:#FFFCF1;
      border:2px solid #FED130
      border-radius:60px;
      color: #F9B218;
      font-size: 30px;
      position: relative;
      text-align center
      overflow hidden
      box-sizing border-box
      .pass
        position: absolute
        top: 0;
        left: 0;
        z-index 1
        height 100px
        background #FED130
      .slide
        height: 100px;
        width: 100px;
        position: absolute;
        top: -2px;
        left: -2px;
        z-index 2
        img
          width 100px
          height 100px

</style>
